<template>
  <div class="tw-libchart">
    <div v-show="data.length>0"
      class="tw-datasetchart"
      ref="chart"
      :style="{height: height, backgroundColor: bgColor}">
    </div>

    <tw-lib-nodata v-show="data.length===0" />
  </div>
</template>

<script>
import props from './props'
import chartMixins from '../tw-lib-base/chart/chart'

export default {
  name: 'chart-area-base',

  mixins: [chartMixins],

  props,

  data() {
    return {
      chartType: 'line'
    }
  },

  computed: {
    yNamePad () {
      if (this.yNamePadding instanceof Array) {
        return this.yNamePadding
      } else if (this.yNamePadding === '') {
        return []
      } else {
        let name = this.yNamePadding.split(',')
        let label = []
        for (let i = 0; i < name.length; i++) {
          if (name[i]) {
            label.push(parseInt(name[i]))
          } else {
            label.push(0)
          }
        }
        return label
      }
    },
    xNamePad () {
      if (this.xNamePadding instanceof Array) {
        return this.xNamePadding
      } else if (this.xNamePadding === '') {
        return []
      } else {
        let name = this.xNamePadding.split(',')
        let label = []
        for (let i = 0; i < name.length; i++) {
          if (name[i]) {
            label.push(parseInt(name[i]))
          } else {
            label.push(0)
          }
        }
        return label
      }
    }
  },

  methods: {
    setSeries () {
      let length = 0
      if (this.seriesIsRow) {
        length = this.data.length
      } else {
        if (this.data.length > 0) {
          length = this.data[0].length
        }
      }
      this.series = []
      for (let i = 0; i < length - 1; i++) {
        // let c1 = this.colors[2 * i]
        // let c2 = this.colors[2 * i + 1]
        let color = this.colors[i]
        let c1 = this.hexToRgb(color)
        let c2 = ''
        if (c1 === '0') {
          this.areaStyle = false
        } else {
          c2 = c1 + ',0)'
          c1 = c1 + ',0.35)'
        }

        let series = {
          type: this.chartType,
          seriesLayoutBy: this.seriesIsRow ? 'row' : 'column',
          areaStyle: (!this.areaStyle) ? {
            opacity: this.areaStyleOpacity
          } : {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
							offset: 0,
							color: c2
						}, {
							offset: 1,
							color: c1
						}]),
          },
          label: {
            show: this.showLabel,
            fontSize: this.labelFontSize,
            position: this.labelPosition,
          },
          symbolSize: this.symbolSize || 4,
          lineStyle: {
            width: this.lineWidth || 2
          },
          smooth: this.isSmooth
        }

        let cusSeries = {}
        if (this.useSeries && this.funcSeries !== '' && typeof this.funcSeries === 'function') {
          cusSeries = this.funcSeries(i, this)
        }
        Object.assign(series, {}, cusSeries)
        this.series.push(series)
      }

      if (this.extendOption && this.funcExtOption !== '' && typeof this.funcExtOption === 'function') {
        this.funcExtOption(this)
      }
    },

    // RGB(A)颜色转换为HEX十六进制的颜色值
    rgbToHex (val) {
        let r = ''
        let g = ''
        let b = ''
        let a = ''
        let regRgba = /rgba?\((\d{1,3}),(\d{1,3}),(\d{1,3})(,([.\d]+))?\)/    // 判断rgb颜色值格式的正则表达式，如rgba(255,20,10,.54)
        let rsa = val.replace(/\s+/g,'').match(regRgba)
        if (!!rsa) {
          r = parseInt(rsa[1]).toString(16)
          r = r.length == 1 ? '0' + r : r
          g = (+rsa[2]).toString(16);
          g = g.length == 1 ? '0' + g : g
          b = (+rsa[3]).toString(16);
          b = b.length == 1 ? '0' + b : b
          a = (+(rsa[5] ? rsa[5] : 1)) * 100
          return { hex: '#' + r + g + b, alpha: Math.ceil(a) }
        } else {
          return { hex: val, alpha: 100 }
        }
    },
    // HEX十六进制颜色值转换为RGB(A)颜色值
    hexToRgb (val) {
      let a = ''
      let b = ''
      let c = ''
      if ((/^#/g).test(val)) {
        a = val.slice(1, 3)
        b = val.slice(3, 5)
        c = val.slice(5, 7)
        let r = 'rgba(' + parseInt(a,16) + ',' + parseInt(b,16) + ',' + parseInt(c,16) + ''
        return r // {rgba:'rgb(' + parseInt(a,16) + ',' + parseInt(b,16) + ',' + parseInt(c,16) + ')'}
      } else if ((/^rgba/g).test(val)) {
        let m = val.split(',')
        a = m[0]
        b = m[1]
        c = m[2]
        return a + ',' + b + ',' + c
      } else if ((/^rgb/g).test(val)) {
        let n = val.split(')')[0].split('(')
        a = n[1]
        return 'rgba(' + a
      } else {
        return '0' // {rgba:'0,0,0,0'}
      }
    }
  },

  watch: {
    seriesIsRow () {
      this.setSeries()
    },
    colors () {
      this.setSeries()
    },

    isSmooth () {
      this.setSeries()
    },

    areaStyle () {
      this.setSeries()
    },
    areaStyleOpacity () {
      this.setSeries()
    },
    useSeries () {
      this.setSeries()
    },
    extendOption () {
      this.setSeries()
    },
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
